<template>
	<view class="main">
		<view class="head">
			<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/098dd202209221028436082.png" mode=""></image>
		</view>
		<view class="tags">
			<view v-for="(item,index) in tagsList" :key="index" class="tags-item" @click="handledToPage(item.categoryId,item.name)">
				{{item.name}}
			</view>
		</view>
		<view class="list">
			<view class="lists">
				<view class="" @click="actives(1)" :class="active==1? 'active-style':''">发布时间</view>
				<view class="" @click="actives(2)" :class="active==2? 'active-style':''">评论时间</view>
				<view class="" @click="actives(3)" :class="active==3? 'active-style':''">热门内容</view>
				<view class="" @click="actives(4)" :class="active==4? 'active-style':''">我的</view>
			</view>
			<!-- <posts :list="lists"  /> -->
			<view class="">
				<view class="" style="margin-bottom: 20rpx;border-bottom: 1px solid #eee;" v-for="i,index in lists" :key="index">
					<view class="heads" @click="handledToDetail(i.threadId)">
						<view class="head-left">
							<view class="avatar">
								<image style="width: 90rpx;height: 90rpx;" :src="i.user.avatar == ''?'https://www.szzn.group/uploads/20221115/183193e92b0a813e1134627e155f1b33.png':i.user.avatar" mode=""></image>
							</view>
							<view class="info">
								<view class="info-top">
									<view class="name" style="font-size: 28rpx;" >{{i.user.nickname}}</view>
									<!-- <view class="tag">活动精选</view> -->
								</view>
								<view class="info-time">{{i.diffTime}}</view>
							</view>
						</view>
						<view style="font-size: 24rpx;" class="head-right">{{i.createdAt}}</view>
					</view>
					<view class="">
						<view class="" style="font-weight: 700;padding: 0 0 0 100rpx;" @click="handledToDetail(i.threadId)">{{i.title}}</view>
						<view class="content" @click="handledToDetail(i.threadId)">{{i.content.text}}</view>
						<view class="imgs" style="padding: 0 0 0 100rpx;">
							<image style="width: 150rpx;height: 150rpx;margin: 0 10rpx 10rpx;" :src="item.thumbUrl" mode="aspectFill" v-for="item,inx in i.content.indexes[101].body" :key="inx" @click="imagePreview(i.threadId,inx)"></image>
						</view>
						<!-- <view class="tags">
						<view class="tags-item">#长沙市#</view>
					</view>
					<view class="position">
						<van-icon name="location" color="#289958" style="margin-right: 8rpx;" />
						长沙市
					</view> -->
						<view class="foot">
							<view class="foot-left" style="position: relative;font-size: 24rpx;color: #ccc;">
								<van-icon name="share-o" size="32rpx" />分享
								<button style="opacity: 0;position: absolute;top: 50%;transform: translateY(-50%);" open-type="share">123</button>
							</view>
							<view class="foot-right">
								<view class="right-item" @click="handledToDetail(i.threadId)">
									<van-icon size="32rpx" name="chat-o" />				
								</view>
								<view class="right-item" @click="details(i.threadId)" v-if="userData.userId ==i.userId">
									<van-icon size="32rpx" name="cross" >删除</van-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="add" @click="handledToPublish">
			<van-icon name="plus" color="#289958" style="font-weight: bold;" />
		</view>
	</view>
</template>

<script>
	import {getTopic,getTopicList,login,getDabiaoti,deteiltocks } from '@/api/circle.js'
	export default {
		data() {
			return {
				active: 1,
				Tokens:'',
				page:1,
				lists:[],
				tagsList: [{
						name: '专题交流',
						link: '/page_forum/special/special'
					},
					{
						name: '问题解答',
						link: '/page_forum/quintessence/quintessence'
					},
					{
						name: '话题讨论',
						link: '/page_forum/topic/topic'
					}
				],
				userData:{},
				arr:[],
				total:''
			}
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '优栽园',
				path: 'page_forum/index/index'
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '优栽园',
				path: 'page_forum/index/index'
			};
		},
		onLoad() {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/page_login/index/index'
							})
						} else if (res.cancel) {
							uni.navigateBack()
						}
					}
				});
				return
			}
			this.login()
			// this.getTopic()
			this.getTopicList()
		},
		onShow() {
			this.getTopicList()
			this.getDabiaoti()
			this.active= 1
		},
		onReachBottom() {
			if(this.total == this.lists.length)return
			console.log('123')
			if(this.active == ''){
				this.active = 1
			}
			this.page++
			if(this.active == 4){
				uni.showLoading({
					title:'加载中'
				})
				let data = `page=${this.page}&perPage=${20}&filter[toUserId]=${0}&filter[complex]=${5}&dzqSid=${74874316-1664446553074}&dzqPf=${'h5'}&scope=${0}`;
				getTopicList(data).then(res=>{
					if(res.data.Code == 0){
						uni.hideLoading()
						this.lists.push(...res.data.Data.pageData)
					}
				})
				return
			}
			uni.showLoading({
				title:'加载中'
			})
			let data = `page=${this.page}&perPage=${20}&filter[essence]=${0}&dzqSid=${74874316-1664446553074}&dzqPf=${'h5'}&filter[attention]=${0}&filter[sort]=${this.active}&scope=${0}`;
			getTopicList(data).then(res=>{
				if(res.data.Code == 0){
					uni.hideLoading()
					this.lists.push(...res.data.Data.pageData)
				}
			})
		},
		methods: {
			details(id){
				let that = this;
				let data = {
					dzqSid:83945216-1668513407456,
					dzqPf: 'pc',
					threadId:id
				}
				uni.showModal({
					title: '提示',
					content: '是否删除该帖子',
					success: function (res) {
						if (res.confirm) {
							deteiltocks(data).then(res=>{
								if(res.data.Code == 0){
									uni.showToast({
										title:'删除成功',
										duration:1000
									})
									that.getTopicList()
									that.active = 1
								}else {
									uni.showToast({
										title:res.data.Message,
										duration:1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})	
			},
			imagePreview(id, index) {
				this.lists.forEach(item=>{
					if(item.threadId == id){
						item.content.indexes[101].body.forEach(i=>{
							this.arr.push(i.url);
						})
					}
				})
				uni.previewImage({
					current: index,
					urls: this.arr
				});
				this.arr = [];
			},
			actives(type){
				this.active = type
				if(this.active == 4){
					let data = `page=${1}&perPage=${20}&filter[toUserId]=${0}&filter[complex]=${5}&dzqSid=${74874316-1664446553074}&dzqPf=${'h5'}&scope=${0}`;
					getTopicList(data).then(res=>{
						this.lists = res.data.Data.pageData
						this.total = res.data.Data.totalCount
					})
				}else {
					this.getTopicList(type)
				}
				this.page = 1
			},
			getDabiaoti(){
				let data = `dzqSid=${22214006-1668060231880}&dzqPf=${'h5'}`
				getDabiaoti(data).then(res=>{
					this.tagsList = res.data.Data
				})
			},
			login(){
				let data= {
					yt_token:uni.getStorageSync('token')
				};
				login(data).then(res=>{
					this.userData = res.data.Data
					uni.setStorageSync('userData',this.userData)
					this.Tokens = res.data.Data.accessToken
					uni.setStorageSync('Tokens',this.Tokens)
				})
			},
			getTopicList(type){
				if(type == undefined){
					type = 1
				}
					let data = `page=${1}&perPage=${20}&filter[essence]=${0}&dzqSid=${74874316-1664446553074}&dzqPf=${'h5'}&filter[attention]=${0}&filter[sort]=${type}&scope=${0}`;
					getTopicList(data).then(res=>{
						this.lists = res.data.Data.pageData
						this.total = res.data.Data.totalCount
					})
				
			},
			// tags页面跳转
			handledToPage(id,name) {
				uni.navigateTo({
					url:`/page_forum/special/special?id=${id}&name=${name}`
				})
			},
			handledToDetail(i){
				uni.navigateTo({
					url: '/page_forum/articledetail/articledetail?id=' +i
				})
			},
			// 发布
			handledToPublish() {
				uni.navigateTo({
					url:'/page_forum/publish/publish'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.head {
			padding: 0 30rpx;

			image {
				width: 100%;
				height: 250rpx;
			}
		}

		.tags {
			margin-top: 15rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;

			&-item {
				width: 212rpx;
				height: 100rpx;
				border-radius: 16rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				background: linear-gradient(90.93deg, #70D5FF -6.74%, #3DABF2 99.22%);

				&:nth-child(2) {
					background: linear-gradient(91.47deg, #FAB834 0.97%, #FE9406 98.77%);
				}

				&:nth-child(3) {
					background: linear-gradient(91.47deg, #3DB963 0.97%, #289958 98.77%);
				}
			}
		}

		.list {
			margin-top: 10rpx;
			padding: 0 30rpx;
		}
		.add {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #ECFAF1;
			box-shadow: 0px 0px 11px 1px rgba(61, 185, 99, 0.5);
			position: fixed;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.lists {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		font-size: 28rpx;
	}
	.active-style {
		color: #289958;
		border-bottom: 2px solid #289958;
		font-weight: 700;
	}
	.heads {
		display: flex;
		justify-content: space-between;
		.head-left {
			display: flex;
		}
		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			// background-color: #289958;
			margin:0 15rpx 10rpx 0;
		}
		.info-time {
			padding: 10rpx 0 0 0;
			font-size: 26rpx;
			color: #ccc;
		}
		
	}
	.content {
		font-size: 28rpx;
		padding: 10rpx 50rpx 10rpx 100rpx;
	}
	.foot {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0rpx 0 100rpx;
		.foot-right {
			display: flex;
			justify-content: space-between;
			.right-item {
				width: 80rpx;
				text-align: center;
			}
		}
	}
</style>
